<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.dataviz.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.dataviz.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
            <div id="example" class="k-content">
            <div id="gauge-container">
                <div id="gauge"></div>

                <input id="gauge-value" value="65">
            </div>

            <script>
                function createGauge() {
                    $("#gauge").kendoRadialGauge({
                        theme: $(document).data("kendoSkin") || "default",

                        pointer: {
                            value: $("#gauge-value").val()
                        },

                        scale: {
                            minorUnit: 5,
                            startAngle: -30,
                            endAngle: 210,
                            max: 180
                        }
                    });
                }

                $(document).ready(function() {
                    createGauge();

                    function updateValue() {
                        $("#gauge").data("kendoRadialGauge").value($("#gauge-value").val());
                    }

                    if (kendo.ui.Slider) {
                        $("#gauge-value").kendoSlider({
                            min: 0,
                            max: 180,
                            showButtons: false,
                            change: updateValue
                        });
                    } else {
                        $("#gauge-value").change(updateValue);
                    }


                    $(document).bind("kendo:skinChange", function(e) {
                        createGauge();
                    });
                });
            </script>

            <style scoped>
                #gauge-container {
                    background: transparent url("../../content/dataviz/gauge/gauge-container-partial.png") no-repeat 50% 50%;
                    width: 386px;
                    height: 386px;
                    text-align: center;
                    margin: 0 auto 30px auto;
                }

                #gauge {
                    width: 350px;
                    height: 300px;
                    margin: 0 auto;
                }

                #gauge-container .k-slider {
                    margin-top: -11px;
                    width: 140px;
                }

            </style>
        </div>


</body>
</html>
